<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的if写法</title>
    <script src="./js/vue.js"></script>
    <style>
        /* div {
            width: auto;
            height: auto;
        } */
    </style>
</head>

<body>
    <div id="app">
        <div v-if='score>=90'>优秀</div>
        <div v-else-if='score < 90 && score>=80'>良好</div>
        <div v-else-if='score<80 && score>=60'>一般</div>
        <div v-else='score<60'>不及格</div>


        <h4>v-for的使用</h4>

        <div>
            <ul>
                <li v-for='item in fruits'>{{item}}</li>
            </ul>
        </div>


        <h4>对象的遍历</h4>
        <div>
            <span v-if='value == 18' v-for='(value , key, index) in obj'>{{value + '-----' + key + '-----' + index +
                ''}}</span>
        </div>

    </div>


    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                score: 59,
                fruits: ['apple', 'orange', 'pear'],
                obj: {
                    uname: 'hahahah',
                    age: '18',
                    grade: '高中'
                }
            }
        })
    </script>
</body>

</html>


<!--v-if就是条件判断 设置元素的显示与隐藏 可以和v-for一起使用  v-for的优先级比v-if的要高 -->

<!-- 不要将v-if 和v-for用在同一元素上 这样会出现性能问题或者渲染复杂问题 https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81 -->